<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主布局</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
    }

    .g-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* 搜索区域 */
    .g-container .g-search {
        height: 40px;
        background-color: pink;
    }

    /* 内容区域 */
    .g-container .g-content {
        flex: 1;
        height: calc(100vh - 40px - 60px);
        overflow: scroll;
    }

    .g-container .g-content .swiper {
        height: 200px;
        background-color: green;
    }

    .g-container .g-content .category {
        height: 150px;
        background-color: blueviolet;
    }

    .g-container .g-content .list {
        height: 400px;
        background-color: burlywood;
    }

    /* 底部区域 */
    .g-container .g-footer {
        height: 60px;
        background-color: pink;
    }

    .city {
        width: 60px;
        height: 40px;
        text-align: center;
        font-size: 16px;
        line-height: 40px;
        font-weight: normal;
        color: white;
    }

    .container {
        display: flex;
        height: 40px;
        background-color: #ff0000;
        align-items: center;
    }

    input {

        flex: 1;
        height: 30px;
        border: none;
        outline: none;
        border-radius: 8px;
        text-indent: 5px;
    }

    .login {
        width: 60px;
        height: 40px;
        text-align: center;
        font-size: 16px;
        line-height: 40px;
        font-weight: normal;
        color: white;
    }

    .swiper {
        width: 600px;
        height: 200px;
    }

    .swiper img {
        width: 600px;
        height: 200px;
    }

    .category-wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 10px;
    }

    .category-wrapper .box {
        width: 20%;
        text-align: center;
    }

    .category-wrapper .box img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .category-wrapper .box p {
        text-align: center;
    }

    *{
        padding: 0;
        margin: 0;
    }

    ul{
        list-style: none;
    }

    .g-footer{
        display: flex;
        justify-content: space-around;
        height: 60px;
        background-color: #f3f4f5;
    }

    .g-footer .active{
        color: red;
    }
</style>
</head>

<body>
    <div class="g-container">
        <!-- 搜索框区域 -->
        <div class="container">
            <h2 class="city">城市</h2>
            <input type="text" placeholder="请输入搜索内容">
            <h2 class="login">登录</h2>
        </div>
        <!-- 内容区域 -->
        <div class="g-content">
            <!-- 轮播区域 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img
                            src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01g8ituT2JJiCsKjmDz_!!2053469401.png"
                            alt="">
                    </div>
                    <div class="swiper-slide"><img
                            src="https://img2.baidu.com/it/u=717979571,3244631707&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400"
                            alt="" /></div>
                    <div class="swiper-slide"><img
                            src="https://img1.baidu.com/it/u=1733684228,4177721799&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                            alt=""></div>
                </div>

            </div>
            <!-- 分类区域 -->
            <div class="category-wrapper">
                <div class="box">
                    <img src="../img/11.jpg" alt="1">
                    <p>美食</p>
                </div>
                <div class="box">
                    <img src="../img/22.jpg" alt="1">
                    <p>电脑</p>
                </div>

                <div class="box">
                    <img src="../img/33.jpg" alt="1">
                    <p>医疗</p>
                </div>

                <div class="box">
                    <img src="../img/44.jpg" alt="1">
                    <p>熊猫</p>
                </div>

                <div class="box">
                    <img src="../img/11.jpg" alt="1">
                    <p>美食</p>
                </div>

                <div class="box">
                    <img src="../img/11.jpg" alt="1">
                    <p>美食</p>
                </div>
                <div class="box">
                    <img src="../img/22.jpg" alt="1">
                    <p>电脑</p>
                </div>

                <div class="box">
                    <img src="../img/33.jpg" alt="1">
                    <p>熊猫</p>
                </div>

                <div class="box">
                    <img src="../img/44.jpg" alt="1">
                    <p>医疗</p>
                </div>

                <div class="box">
                    <img src="../img/11.jpg" alt="1">
                    <p>美食</p>
                </div>
            </div>
            <!-- 列表区域 -->
            <div class="list">列表</div>
        </div>
        <!-- 底部区域 -->
        <div class="g-footer">底部区域</div>
    </div>

    <script src=" https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            autoplay: { // 自动轮播
                delay: 1500
            },
        })        
    </script>

    <ul class="g-footer">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>